<template>
  <div class="screen-map">
    <my-map @click="onMapClick" ref="myMap" :filter="filter" :center="[117.217199,39.130155]" :maxZoom="18" :minZoom="8" @ready="onReady" height="100%" :adapter="adapter">
      <my-map-geo ref="geo" v-if="geo" :json="geo" :fill="fill" :zIndex="5"></my-map-geo>

      <my-map-marker :coordinate="[117.217199,39.130155]" v-if="false"></my-map-marker>

      <my-map-html v-for="(item, index) in markers" :key="index" :position="item" >
        <img class="ripple" :src="icoRipple" @click="onMarkerClick(item)"/>
      </my-map-html>

      <my-map-popup :position="currPosition" v-if="currPosition" :closable="false">
        <div class="map-popup">
          <div class="map-popup-close" @click="onClosePopup"></div>

          <div class="map-popup-head">
            <img src="@/assets/screen/ico-build5.svg" />
            <div class="map-popup-head__title">天津紫光云际产业园有限公司</div>
          </div>
          <div class="map-popup-main">
            <div class="map-popup-tag">建筑业企业</div>
            <div class="map-popup-info">实际产值：<span>2245</span>万</div>
          </div>
          <div class="map-popup-detail">
            <span>详情</span>
          </div>
        </div>
      </my-map-popup>
    </my-map>
    <screen-tool @map-change="onMapChange" @tool-click="onToolClick"/>

    <div class="screen-map-tip" v-if="pointVisible && coordinate" :style="tipStyle">
      {{coordinate.join(',')}}
    </div>
  </div>
</template>

<script>
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import myMap from '@/components/common/map/my-map'
import myMapGeo from '@/components/common/map/my-map-geo'
import myMapMarker from '@/components/common/map/my-map-marker'
import myMapHtml from '@/components/common/map/my-map-html'
import myMapPopup from '@/components/common/map/my-map-popup'

import screenTool from './screen-tool'
import { deepBlue } from '@/components/common/map/utils/filters'

import huayuan from '@/comp/screen/geoJson/huayuan.json'
import bolonghu from '@/comp/screen/geoJson/bolonghu.json'
import haiyang from '@/comp/screen/geoJson/haiyang.json'

import icoRipple from '@/assets/screen/ico-ripple.svg'


const mapper = {
  huayuan,
  bolonghu,
  haiyang,
  shifangqu: haiyang
}

const centerMap = {
  huayuan: [117.07575002539063,39.09101620605469],
  bolonghu: [117.51726308691407,39.126035126953134],
  haiyang: [117.64562799071406,39.071376475351876],
  shifangqu: [117.64562799071406,39.071376475351876]
}

// 高德地图
const layer1 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'http://webrd03.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}&lang=zh_cn'
  })
})

// 高德卫星影像
const layer2 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    zIndex: 0
  })
})

// 高德路网注记
const layer3 = new TileLayer({
  name: 'aMap',
  source: new XYZ({
    url: 'https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
    zIndex: 1
  })
})

const markerMap = {
  huayuan: [
    [117.08733716833497,39.080673608093264],
    [117.0736900888672,39.08831253936768],
    [17.08527723181153,39.094149026184084],
    [117.0821014963379,39.10092965057373]
  ],
  bolonghu: [
    [117.51666227209473,39.13869515350343],
    [117.47975507604981,39.13809433868409],
    [117.49400297033692,39.12530556610108],
    [117.54258314001466,39.1153492062378]
  ],
  haiyang: [
    [117.65292359923458,39.07699838544709],
    [117.65429689025021,39.07021776105744],
    [117.62966348265743,39.085152300852364]
  ]
}

export default {
  name: 'screen-map',
  components: {
    myMap,
    screenTool,
    myMapGeo,
    myMapMarker,
    myMapHtml,
    myMapPopup
  },
  props: {
    menuKey: String
  },
  data() {
    return {
      filter: null,
      adapter({TileLayer, XYZ}) {
        return layer1
      },
      geo: mapper[this.menuKey],
      fill: 'rgba(66,181,246,0.3)',

      pointVisible: false,
      coordinate: null,
      tipStyle: {},
      icoRipple,
      markers: markerMap[this.menuKey],
      currPosition: null
    }
  },
  methods: {
    onReady(map) {
      this.$refs.myMap.zoomTo(14)
      this.$refs.myMap.moveTo(centerMap[this.menuKey])
    },
    onMapChange(flag) {
      const map = this.$refs.myMap.map
      const layers = [].concat(map.getLayers().getArray())

      layers.forEach(layer => {
        const values_ = layer.values_
        if(values_ && values_.name === 'aMap') {
          map.removeLayer(layer)
        }
      })

      if(flag === 1) {
        layer1.__MY_LAYER__ = true
        map.addLayer(layer1)
        // this.filter = deepBlue
      } else {
        this.filter = null
        layer2.__MY_LAYER__ = true
        map.addLayer(layer2)
        map.addLayer(layer3)
      }
    },
    onToolClick(d) {
      if(d === 1) {
        this.pointVisible = true
      } else {
        this.coordinate = null
        this.pointVisible = false
      }
    },
    onMapClick(e) {
      if(!this.pointVisible) return
      this.coordinate = e.coordinate
      const event = e.originalEvent
      this.tipStyle = {
        left: event.pageX + 'px',
        top: event.pageY + 'px'
      }
    },
    onMarkerClick(pos) {
      this.currPosition = pos
    },
    onClosePopup() {
      this.currPosition = null
    }
  },
  watch: {
    menuKey() {
      const geo = mapper[this.menuKey]
      this.$refs.geo.draw(geo)

      const center = centerMap[this.menuKey]
      if(center) {
        this.$refs.myMap.zoomTo(14)
        this.$refs.myMap.moveTo(center)
      }
      const markers = markerMap[this.menuKey]
      this.markers = markers || []
    }
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.screen-map {
  width: 100%;
  height: 100%;
  position: relative;

  &-mask {
    background: url("~@/assets/screen/map-mask.svg") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  &-tip {
    background-color: #0a397c;
    font-size: 13px;
    border-radius: 4px;
    padding: 5px 8px;
    position: absolute;
    transform: translateX(-50%);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  }

  ::v-deep {
    .ol-layer {
      filter: brightness(0.89) contrast(0.93) grayscale(0.07) hue-rotate(360deg) opacity(1) saturate(2) sepia(0.41) invert(1) contrast(120%);
    }

    .ol-unselectable {
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: url("~@/assets/screen/map-mask.svg") no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
      }
    }
  }
}

.map-popup {
  width: 470px;
  height: 175px;
  background: url("~@/assets/screen/popup-bg.png") no-repeat;
  background-size: 100% 100%;
  transform: translateX(50%);
  position: relative;
  padding: 30px;

  &-close {
    background: linear-gradient(180deg, #20D9FF, #1772FC);
    width: 36px;
    height: 36px;
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(~@/assets/screen/ico-close.svg) center center no-repeat;
    }
  }

  &-head {
    display: flex;

    & > img {
      margin-right: 5px;
    }

    &__title {
      font-weight: 500;
      font-size: 24px;
      color: #FFFFFF;
    }
  }

  &-main {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    align-items: center;
  }

  &-tag {
    background-color: rgba(80, 147, 226, 0.2);
    border-radius: 10px;
    color: #21E2FF;
    margin-right: 15px;
    padding: 5px 10px;
  }
  &-info {
    font-size: 18px;
    color: #fff;

    & > span {
      color: #21E2FF;
    }
  }

  &-detail {
    text-align: right;
    margin-top: 10px;
    padding-right: 10px;

    &>span {
      font-size: 18px;
      color: #30E7F2;
      cursor: pointer;
    }
  }

}

</style>
<style lang="scss">
.ripple {
  width: 30px;
  cursor: pointer;
}
</style>
